<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outerBox {
            margin: 0 2%;
            display: flex;
        }

        .outerBox .left {
            width: 66%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .outerBox .left .innerBox {
            border: 2px solid gray;
            width: 23%;
        }

        .outerBox .left .innerBox .pic {
            width: 100%;
            height: 100px;
            background-color: grey;
        }

        .outerBox .left .innerBox button {
            background-color: red;
            color: white;
            border: none;
        }

        .outerBox .right {
            flex: 1;
            border: 2px solid gray;
        }

        .outerBox .right .rightBar .rightBarList {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="outerBox">
        <div class="left"></div>
        <div class="right">
            <h2>购物车(<span></span>)</h2>
            <div class="rightBar"> </div>
            <div class="moneys"></div>
        </div>
    </div>
</body>

</html>

<script>

    class ShoppingCart {
        constructor(arr) {
            this.arr = arr;
            this.left = document.querySelector('.left');
            this.right = document.querySelector('.right .rightBar');
            this.strleft = ``;
            this.strright = ``;
            this.rightObj = { rightArr: [] };
            this.count = 0;
            this.h2 = document.querySelector('h2');
            this.money = 0;
            this.moneys = document.querySelector('.moneys');
            this.num = 1;



            this.renderLeft();
            this.renderRight();
            this.bindEvent();
        }

        //渲染左侧商品列表
        renderLeft() {
            this.strleft = this.arr.map((item, index) => {
                return `
                <div class="innerBox">
                <div class="pic">${item.pic}</div>
                <h3>${item.name}</h3>
                <p>${item.money}</p>
                <button>${item.btn}</button>
            </div>
                `
            }).join('');
            this.left.innerHTML = this.strleft;
        }
        //渲染右侧购物车列表
        renderRight() {

            this.strright = this.rightObj.rightArr.map((item, index) => {
                return `
                <div class="rightBarList">
                    <input type="checkbox">
                    <div class="name">${item.name}</div>
                    <div class="money">${item.money}</div>
                    <div class="num">
                        <span class="jian">-</span>
                        ${item.num}
                        <span class="jia">+</span>
                        </div>
                    <div class="del">删除</div>
                </div>
                
                `
            }).join('');
            // this.rightObj.rightArr.forEach((item) => {
            //     this.count += item[this.count];
            // })

            this.right.innerHTML = this.strright;
            this.h2.innerHTML = `购物车(${this.count})`;
            this.moneys.innerHTML = `共计${this.money}元`;
        }


        //绑定事件
        bindEvent() {

            //点击事件
            this.left.onclick = (e) => {
                // console.log(e);
                if (e.target.tagName == 'BUTTON') {
                    let btns = [...document.querySelectorAll('button')];
                    let index = btns.findIndex((item) => {
                        return item == e.target;
                    })
                    if (this.rightObj.rightArr.indexOf(this.arr[index]) == -1) {
                        console.log(111);
                        this.rightObj.rightArr.push(this.arr[index]);
                        this.money += this.arr[index].money;
                        this.count += 1;
                        this.renderRight();
                    } else {
                        this.arr[index].num++;
                        this.count += 1;
                        this.money += this.arr[index].money;
                        this.renderRight();

                    }
                }
            }

            this.right.onclick = (e) => {
                if (e.target.className == 'del') {
                    let dels = [...document.querySelectorAll('.del')];
                    let index = dels.findIndex((item) => {
                        return item == e.target;
                    })
                    // console.log(index);
                    // console.log(this.rightObj.rightArr[index]);
                    this.money -= this.rightObj.rightArr[index].money * this.rightObj.rightArr[index].num;
                    this.count = this.count-this.rightObj.rightArr[index].num;
                    this.rightObj.rightArr.splice(index, 1);
                    this.renderRight();
                }



                if (e.target.className == 'jia') {
                    let jias = [...document.querySelectorAll('.jia')];
                    let index = jias.findIndex((item) => {
                        return item == e.target;
                    })
                    // console.log(this.rightObj.rightArr[index]);
                    this.rightObj.rightArr[index].num++;
                    this.count++;
                    this.money += this.rightObj.rightArr[index].money;
                    this.renderRight();
                }
                if (e.target.className == 'jian') {
                    let jians = [...document.querySelectorAll('.jian')];
                    let index = jians.findIndex((item) => {
                        return item == e.target;
                    })
                    this.money -= this.rightObj.rightArr[index].money;
                    if (this.rightObj.rightArr[index].num < 2) {
                        console.log(this.rightObj.rightArr);
                        this.count--;
                        this.rightObj.rightArr.splice(index, 1);
                        this.renderRight();

                    }else{

                        // console.log(this.rightObj.rightArr[index]);
                        this.rightObj.rightArr[index].num--;
                        this.count--;
                        this.renderRight();
                    }
                }
            }
        }
    }
    let arr = [
        { pic: '', name: '高级办公椅', money: 10000, num: 1, btn: '加入购物车' },
        { pic: '', name: '高级按摩椅', money: 1000, num: 1, btn: '加入购物车' },
        { pic: '', name: '高级电动按摩椅', money: 100, num: 1, btn: '加入购物车' },
        { pic: '', name: '电动按摩椅', money: 10, num: 1, btn: '加入购物车' },
        { pic: '', name: '老板椅', money: 20000, num: 1, btn: '加入购物车' },
        { pic: '', name: '办公桌', money: 50000, num: 1, btn: '加入购物车' },
        { pic: '', name: '可升降办公椅', money: 2000, num: 1, btn: '加入购物车' },
        { pic: '', name: '可升降办公桌', money: 5000, num: 1, btn: '加入购物车' },
    ]

    new ShoppingCart(arr);

</script>